<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>投票</title>

    <!-- Bootstrap -->
    <link href="__TMPL__/public/assets/cook/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="__TMPL__/public/assets/cook/css/toast.css">
    <!--initialize-->
    <link rel="stylesheet" href="__TMPL__/public/assets/cook/css/init.css" />
    <link rel="stylesheet" href="__TMPL__/public/assets/cook/css/vote.css" />
    <link rel="stylesheet" href="https://cdn.bootcss.com/Swiper/3.4.2/css/swiper.min.css"/>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<!---->
<body>
<div class="swiper-container">
    <div class="swiper-wrapper">
        <volist name="slide" id="vo">
            <div class="swiper-slide"><img src="{:cmf_get_asset_url($vo['image'])}" alt="" /></div>
        </volist>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
</div>
<div class="title">排行榜</div>
<div class="top_b">
    <volist name="list" id="vo" offset="0" length='3'>
        <div class="list">
            <img src="{:cmf_get_asset_url($vo['thumbnail'])}" alt="" />
            <div class="mc">
                <div class="left">
                    第<span style="color:rgba(151, 39, 39, 1);">{$key+1}</span>名
                </div>
                <div class="right">
                    <span class="vote_num_{$vo.id}" style="color:rgba(151, 39, 39, 1);">{$vo.vote_num}</span>票
                </div>
            </div>
            <div class="name">菜名：{$vo.name}</div>
            <div class="author">作者：{$vo.author}</div>
        </div>
    </volist>
</div>
<div class="title">榜单列表</div>
<div class="bd_list">
    <volist name="list" id="vo">
        <div class="mother_list">
            <div class="list">
                <img src="{:cmf_get_asset_url($vo['thumbnail'])}" alt="" />
                <div class="mc">
                    <div class="left">
                        第<span style="color:rgba(151, 39, 39, 1);">{$key+1}</span>名
                    </div>
                    <div class="right">
                        <span class="vote_num_{$vo.id}" style="color:rgba(151, 39, 39, 1);">{$vo.vote_num}</span>票
                    </div>
                </div>
                <div class="name">菜名：{$vo.name}</div>
                <div class="author">作者：{$vo.author}</div>
            </div>
            <div class="vote" data-id="{$vo.id}">投TA一票</div>
        </div>
    </volist>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="__TMPL__/public/assets/cook/js/jquery-3.2.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="__TMPL__/public/assets/cook/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/Swiper/3.4.2/js/swiper.min.js"></script>
<script src="__TMPL__/public/assets/cook/js/fontsize.js"></script>
<script src="__TMPL__/public/assets/cook/js/toast.js"></script>
<script>
    var mySwiper = new Swiper(".swiper-container", {
        direction: "horizontal",
        loop: true,

        // 如果需要分页器
        pagination: ".swiper-pagination"
    });

    $('.vote').click(function () {
        var id=$(this).data('id');
        $.post("{:url('vote')}",{id:id},function (res) {

            if(res.code==1){
                var vote_num=$('.bd_list .vote_num_'+id).html();
                vote_num=parseInt(vote_num)+1;
                $('.vote_num_'+id).html(vote_num);
            }
            showMessage(res.msg,2000,true,'bounceInUp-hastrans','bounceOutDown-hastrans');
        })
    })
</script>
</body>
</html>
